<template>
  <div class="tag-table">
    <template v-if="list.length">
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="overview-chart" id="praise-chart"></div>
        </el-col>
        <el-col :span="16">
          <ul>
            <li v-for="(item, index) in list" :key="index">
              <el-row :gutter="20">
                <el-col :span="1">
                  <div><icon-svg :name="item.assetType | iconNameFormatter" class="typeIcon"></icon-svg></div>
                </el-col>
                <el-col :span="17">
                  <div>
                    <span class="click-item" @click="gotoDetial(item)">
                      {{ item.assetNm }}
                    </span>
                  </div>
                </el-col>
                <el-col :span="6" align="right">{{ item.cmntPhrase }}</el-col>
              </el-row>
            </li>
          </ul>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" align="right"><span class="click-item" @click="more">查看更多</span></el-col>
      </el-row>
    </template>
    <template v-else>
      <div class="no-records">
        <img src="../img/no-records.png" />
        <p>我还没有过评价，看到好东西评个价，让金子发出光芒！</p>
      </div>
    </template>
  </div>
</template>

<script>
import '../utils/marketFormatter'
import market from '../utils/market.js'
import * as echarts from 'echarts'
export default {
  data() {
    return {
      list: [],
      praiseChart: null
    }
  },
  methods: {
    getInfo() {
      this.$ajax({
        url: this.$ajax.setUrl('index/supermarket/cmntList'),
        method: 'get',
        params: this.$ajax.setParams({
          currentPageNum: 1,
          pageSize: 5,
          queryParams: {
            userId: this.$store.state.user.id
          }
        })
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.list = data.data.records
          if (this.list.length) this.getChart()
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    getChart() {
      this.$ajax({
        url: this.$ajax.setUrl('index/supermarket/cmntCount'),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.$nextTick(() => this.setChart(data.data))
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    setChart(data) {
      if (!this.praiseChart) {
        this.praiseChart = echarts.init(document.getElementById('praise-chart'))
        window.addEventListener('resize', () => {
          this.praiseChart.resize()
        })
      }
      let series = []
      let color = []
      data.forEach(v => {
        series.push({
          value: v.cmntTypeNum,
          name: this.$dict('asset_type')[v.assetType]
        })
        color.push(market.computeColor(v.assetType))
      })
      var option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c}'
        },
        color: color,
        series: [
          {
            name: '任务汇总',
            type: 'pie',
            center: ['50%', '50%'],
            radius: ['50%', '70%'],
            data: series
          }
        ]
      }
      this.praiseChart.setOption(option)
      this.praiseChart.resize()
    },
    gotoDetial(item) {
      market.gotoDetail(item)
    },
    more() {
      this.$blank('market-rate-list')
    }
  }
}
</script>

<style lang="scss"></style>
